<template>
  <div class="pyg_view">
    <div class="wrapper" ref="wrapperleft">
      <ul class="pyg_cateList">
        <li
          v-for="(item,index) in itemTytle"
          :key="index"
          :class="{'active':current===index}"
          @click="initProList(index)"
        >{{item.cat_name}}</li>
      </ul>
    </div>
    <div class="wrapperright" ref="wrapperright">
      <div class="content">
        <div class="cate_rightBox clearfix" v-for="(item1,index1) in proList" :key="index1">
          <p>{{item1.cat_name}}</p>
          <ul>
            <li v-for="(item2,index2) in item1.children" :key="index2">
              <router-link to>
                <img :src="'http://api.pyg.ak48.xyz/'+ item2.cat_icon" alt>
                <p>{{item2.cat_name}}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getItemList } from '@/api'
import Bscroll from 'better-scroll'
export default {
  data () {
    return {
      itemTytle: [],
      proList: [],
      current: 0
    }
  },
  methods: {
    initProList (index) {
      this.current = index
      this.getProList(index)
    },
    getCategoryItem () {
      getItemList().then(res => {
        this.itemTytle = res.data.data
        this.$nextTick(() => {
          this.scrollleft = new Bscroll(this.$refs.wrapperleft, {
            click: true
          })
        })
      })
    },
    getProList (index) {
      getItemList().then(res => {
        this.proList = res.data.data[index].children
        this.updated()
      })
    },
    updated () {
      let img = document
        .getElementsByClassName('content')[0]
        .getElementsByTagName('img')
      let count = 0
      let length = img.length
      if (length) {
        let timer = setInterval(() => {
          if (count === length) {
            this.scrollright = new Bscroll(this.$refs.wrapperright, {
              click: true
            })
            clearInterval(timer)
          } else if (img[count].complete) {
            count++
          }
        }, 100)
      }
    }
  },
  created () {
    this.getCategoryItem()
    this.getProList(0)
  }
}
</script>
<style lang="scss" scoped>
.pyg_view {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  .wrapper {
    height: 100%;
    width: 100px;
    background: #efeff4;
    position: relative;
    .pyg_cateList {
      overflow: hidden;
      border-right: 1px solid #ccc;
      > li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        &.active {
          background-color: #fff;
          color: orange;
          border-left: 3px solid #0094ff;
        }
      }
    }
  }
  .wrapperright {
    flex: 1;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    .content {
      .cate_rightBox {
        padding: 0 px 10px;
        > p {
          color: #0094ff;
          padding: 10px;
        }
        > ul {
          width: 100%;
          > li {
            width: 33.33%;
            float: left;
            text-align: center;
            img {
              width: 70%;
              display: inline-block;
            }
            p {
              margin: 10px auto;
              font-size: 13px;
              color: #8f8f94;
            }
          }
        }
      }
    }
  }
}
</style>
